<template>
	<div>
		<nav-header></nav-header>
		<div v-if="detail" class="content">
			<div class="left">
				{{ detail.article_info.title }}
			</div>
			<div class="right">
				{{ isAgree ? "已点赞" : "未点赞" }}
				<div>
					<button @click="agree">点赞</button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import NavHeader from "../components/Common/NavHeader/Index.vue";
import { mapState } from "vuex";
import axios from "axios";
export default {
	components: {
		NavHeader,
	},
	data() {
		return {
			id: this.$route.query.id,
			isAgree: false,
		};
	},
	created() {
		this.$store.commit("getDetailData", this.id);
		this.checkStatus();
	},
	watch: {
		agreeList: {
			handler(newVal, oldVal) {
				// 数据改变了
				let i = 0;
				for (i; i < newVal.length; i++) {
					if (
						newVal[i].article_id == this.id &&
						newVal[i].phone == localStorage.getItem("phone")
					) {
						break;
					}
				}
				if (i === newVal.length) {
					this.isAgree = false;
				} else {
					this.isAgree = true;
				}
			},
			deep: true,
		},
	},
	computed: {
		...mapState(["detail", "agreeList"]),
	},
	methods: {
		checkStatus() {
			let i = 0;
			for (i; i < this.agreeList.length; i++) {
				if (
					this.agreeList[i].article_id == this.id &&
					this.agreeList[i].phone == localStorage.getItem("phone")
				) {
					break;
				}
			}
			if (i === this.agreeList.length) {
				this.isAgree = false;
			} else {
				this.isAgree = true;
			}
			// 查询是否点过赞
			// axios.get(`/check?id=${this.id}&phone=${localStorage.getItem('phone')}`).then(res => {
			//     if(res.data.code === 1) {
			//         this.isAgree = true
			//     } else {
			//         this.isAgree = false
			//     }
			// })
		},
		agree() {
			// 发请求
			this.$store.dispatch("agree", {
				phone: localStorage.getItem("phone"),
				article_id: this.id,
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.content {
	width: 960px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	.right {
		width: 50px;
	}
}
</style>
